<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1/6大小的西瓜</title>
    <style>
        body {
            background-color: #F0F0F0;
        }

        canvas {
            display: block;
            margin: 0 auto;
            background-color: #F0F0F0;
        }
    </style>
</head>

<body>
    <canvas id="myCanvas" width="300" height="300"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        const cx = 150;
        const cy = 120;
        const r = 150;
        const t = 8;
        const startAngle = Math.PI / 3;
        const endAngle = 2 * Math.PI / 3;

        // 绘制瓜瓤
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.arc(cx, cy, r, startAngle, endAngle);
        ctx.closePath();
        ctx.fillStyle = '#FF0000';
        ctx.fill();

        // 绘制瓜皮
        ctx.beginPath();
        ctx.arc(cx, cy, r, startAngle, endAngle);
        ctx.arc(cx, cy, r - t, endAngle, startAngle, true);
        ctx.closePath();
        ctx.fillStyle = '#97C30A';
        ctx.fill();
    </script>
</body>

</html>